<template>
<div class="flex box_cont">
    <!--  -->
    <div class="box_cont topic_cont flex_column_between" :style="{width: questions.length > 0 ? '65%' : '100%'}" ref="boxfull" v-loading="loading">
        <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
        <div class="tit_cont">
            <div class="font36 bold">关卡{{ article && article.sort || ''}}：{{ article && article.title || '' }}</div>
            <div class="w-full level_cont flex_center_between">
                <div class="flex_center level_row font20 ">
                    参考时长 {{ article && article.duration || 0}}″     难度系数
                    <div class="flex_center_between" v-if="article">
                        <img v-for="i in article.difficultyRate" class="level_icon" src="@/assets/img/collect_3.png" :key="i"/>
                        <template v-if="article.difficultyRate < 5">
                            <img v-for="i in 5 - article.difficultyRate" class="level_icon" src="@/assets/img/collect.png" :key="'e' + i"/>
                        </template>
                    </div>
                </div>
                <div class="print_cont flex_c_c font20 themeFont cur" @click="gozh(true)">
                  {{ z_c }}
                </div>
                <div class="print_cont flex_c_c font20 themeFont cur" @click="printFun">
                    <img class="icon" src="@/assets/img/print_3.png" />
                      打印
                </div>

            </div>
        </div>

        <!-- 文章内容  -->
      <div v-if="z_c == '转英文'">
        <div v-if="article" ref="refWord" class="text_cont flex-center" v-html="article.translate"
        ></div>
        <empty v-else text="暂无内容" type="1"/>
      </div>
      <div v-if="z_c == '转中文'">
        <div v-if="article" ref="refWord" class="text_cont flex-center" v-html="article.content"
             @mouseup.stop="onmouseup($event)"></div>
        <empty v-else text="暂无内容" type="1"/>
      </div>

        <div class="btn_cont flex_center_between">
            <p class="left_num flex_center"> 
                <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;margin-right: 10px;" type="warning" @click="articlePlayAudio()">
                    <div class="flex_c_c"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/play_1.png" />{{ playStatus ? '取消' : '点读' }}</div> 
                </el-button>
                <audio style="width: 56rem;" :src="article.voiceFile ? article.voiceFile.url : ''" controls ref="audioArticle" @ended="articlePlayEnd" v-if="playStatus" controlsList="nodownload" autoplay></audio>
            </p>
            <div class="flex-1 flex justify-end">
                <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="wordShow" v-if="!wordShowStatus">
                    <div class="flex_c_c"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sc.png" /> 生词</div> 
                </el-button>
                <el-button style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="primary" @click="wordHide" v-if="wordShowStatus">  
                    <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/zt.png"/> 隐藏</div> 
                </el-button>
                <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="rememberWord">
                    <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sj.png" /> 识记</div> 
                </el-button>
            </div>
        </div>
    </div>

    <!-- 答题 -->
    <div class="answer_cont flex flex-column" v-if="questions.length > 0">
        <div class="w_full answer_tit flex_center">
            <div class="title flex_c_c">
                <img class="icon" src="@/assets/img/time_1.png" />
                <span class="text">{{ exercise && exercise.useTime }}</span>
            </div>
        </div>
        <div class="head_cont cur" @mouseup.stop="onmouseup_word($event)">
            <span class="tag font24"><span class="font32">{{ questionIndex + 1 }}</span>/{{ questions.length }}</span>      
            {{ question && question.stem || ''}}
        </div>
        <!-- 选项 -->
        <div class="flex_center option_row font32 cur" v-for="(item, index) in question.option" :class="{status: question && question.answer && checkOptionChoose(item), wrong: question && question.answer && !checkOptionRight(item) && checkOptionChoose(item)}" :key="index">
            <div>
                <div class="option flex_c_c font-26" :class="{status1: question && question.answer && checkOptionChoose(item), wrong: question && question.answer && !checkOptionRight(item) && checkOptionChoose(item)}">{{ item.prefix }}</div>
            </div>
            <p class="word_text" @mousedown="mouseDownFn" @mouseup.stop="onmouseup_word($event)"  @dblclick="onmouseup_word()">{{ item.content }}</p>
        </div>
        <div class="work_cont">
            <p class="font24"><span class="bold">选择答案：</span>{{ question && question.answer && question.answer.data.join(',') || '未答题' }}</p>
            <p class="font24"><span class="bold">正确答案：</span>{{ question && question.rightAnswer.join(',') }}</p>
            <p class="font20 text"><span class="bold">详细解析：</span> {{ question && question.analysis || '暂无' }}</p>
        </div>
        <div class="flex-1 flex justify-end" style="margin-top: 1.8rem;">
            <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="questionIndex > 0" @click="prevQuestion">  
                    上一题
            </el-button>
            <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="(questionIndex + 1) < questions.length" @click="nextQuestion">  
                    下一题
            </el-button>
        </div>
    </div>

    <!-- 文章单词弹窗 -->
    <div class="modal_cont" v-if="wordPop" @click="closeWordPop(1)">
         <div class="info_cont" :style="{top:infoTop+'px',left:infoLeft+'px'}">
            <div class="word bold font32">{{ infoword }}</div> 
            <div class="word_btn font22 cur" @click.stop="addWordFun(infoword, 1)" v-loading="addWordLoading">+  加入生词</div>
        </div>
    </div>

    <!-- 题目选项单词弹窗 -->
    <div class="modal_cont" v-if="questionWordPop" @click="closeWordPop(2)">
        <div class="window_cont" ref="myElement" :style="{top:wtop+'px',left:wleft+'px'}" v-loading="wordTranslateLoading">
            <div class="word bold font32 flex_center cur">
                {{ word }}  
                <img class="play_icon" src="@/assets/img/play_2.png" @click.stop="playAudio(2)"/>
            </div>
            <div class="font24 word_meaning" v-html="wordTranslate.translation"></div> 
            <div class="wordbtn_cont flex_center_between">
                <div class="word_btn font22 cur" @click.stop="addWordFun(word, 2)">+  加入生词</div>
                <div class="word_btn font22 bl cur" @click.stop="jumpYoudao(word)">详细解释</div>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import { exerciseInfo } from '@/api/articleExercise.js'
import { article } from '@/api/courseArticle.js'
import { wordList, addWord, wordTranslate } from '@/api/articleWord.js'
import config from '@/config/index.js'
export default {
    components: {
    },
    props: {
        bearRef: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            loading: false,
            addWordLoading: false,
            wordTranslateLoading: false,
            wordShowStatus: false,
            questionWordPop: false,
            questionShow: false, // 是否显示题目
            articleId: 0,
            exerciseId: 0,
            userId: 0,
            article: null,
            exercise: {},
            playStatus: false,
            voiceUrl: '',
            z_c: '转中文',
            wordsList: [],
            infoTop: 0,
            infoLeft: 0,
            wtop: 0,
            wleft: 0,
            wordPop: false,
            infoword: '',
            word: '',
            firstTime: '',
            lastTime: '',
            isClick: true,
            wordTranslate: {},
            questionIndex: 0,
            question: {}, // 当前题目
            questions: [], // 所有题目
            questionAnswer: {}
        }
    },
    created() {},
    mounted(){
        this.exerciseId = this.$route.query.exerciseId || 0
        this.userId = this.$route.query.userId || 0
        this.articleId = this.$route.query.articleId || 0
        this.getExercise()
        this.getWordList()
    },
    methods:{
        getExercise() {
            this.loading = true
            exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.exercise = res.data
                    let useTime = res.data ? res.data.useTime : 0
                    this.exercise.useTime = this.formatUseTime(useTime)

                    this.questionAnswer = {}
					res.data.log.answer.forEach(item => {
						this.questionAnswer[item.id] = {
							score: Number(item.mark.score),
							status: item.mark.isRight,
							data: item.answer,
						}
					});
                    this.getArticle()
                    
                }
            }).finally(() => {
                this.loading = false
            })
        },
        //获取文章详情
        getArticle() {
            this.loading = true
            article({id: this.articleId, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.article = res.data
                    let questions = []
                    res.data.questions.forEach(item => {
                        item.answer = this.questionAnswer[item.id] ? this.questionAnswer[item.id] : null
                        questions.push(item)
                    })
                    this.questions = questions
                    this.question = this.questions[this.questionIndex]
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 加入生词
        addWordFun(word, type) {
            if (!word) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择要加入的单词' })
                return
            }

            word = word.trim()
            
            // 判断word是否是英文单词
            let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;
            if (!reg.test(word)) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                return
            }
            if (type == 1) {
                this.addWordLoading = true
            }else if (type == 2) {
                this.wordTranslateLoading = true
            }
            addWord({articleId: this.articleId, word: word, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.$message.success({ el: this.bearRef.$el, message: '加入成功' })
                    if (type == 1) {
                        this.wordPop = false
                    }else {
                        this.questionWordPop = false
                    }
                    window.getSelection().removeAllRanges();
                    this.getWordList()
                }
            }).finally(() => {
                if (type == 1) {
                    this.addWordLoading = false
                }else if (type == 2) {
                    this.wordTranslateLoading = false
                }
            })
        },
        getWordList() {
            wordList({articleId: this.articleId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    let words = []
                    res.data.forEach(item => {
                        words.push(item.word)
                    })
                    this.wordsList = words
                }
            })
        },
        // 获取单词翻译
        getWordTranslate(word) {
            if (!word) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择单词' })
                return
            }
            // 判断word是否是英文单词
            let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;
            if (!reg.test(word)) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                return
            }
            if (this.wordTranslateLoading) return
            this.wordTranslateLoading = true
            wordTranslate({word: word}).then(res => {
                this.wordTranslateLoading = false
                if (res.error == 0) {
                    this.wordTranslate = res.data
                    this.$nextTick(()=>{
                        try {
                            let {bottom} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                            let winHeight =window.innerHeight
                            if(this.$refs.myElement){
                                let h = this.$refs.myElement.offsetHeight
                                if((bottom+h+70)>winHeight){
                                    this.wtop = winHeight - h
                                }
                            }
                        } catch (error) {
                            console.log(error)
                        }
                    })
                }
            }).finally(() => {
                this.wordTranslateLoading = false
            })
        },
        //点击播放
        playAudio() {
            this.voiceUrl = this.wordTranslate.voiceUrl
            this.$nextTick(() => {
                this.$refs.audio.play()
            })
        },
        playEnd() {
            this.voiceUrl = ''
        },
        // 文章播放
        articlePlayAudio() {
            if (this.playStatus) {
                this.$refs.audio.pause()
                this.playStatus = false
                return
            }
            if (this.article.status && this.article.status.value == 2) {
                this.$message.warning({ el: this.bearRef.$el, message: '文章音频正在转换中，请稍等下再播放' })
                return 
            }
            this.playStatus = true
            this.$refs.audioArticle.play()
        },
        // 文章播放结束
        articlePlayEnd() {
            this.playStatus = this.playStatus ? false : this.playStatus
        },
        //隐藏生词
        wordHide(){
            this.wordShowStatus = false
            this.article.content = this.article.content.replace(/<span class="tagword">/g, '')
            this.article.content = this.article.content.replace(/<\/span>/g, '')
        },
        //显示生词
        wordShow(){
            if (this.wordsList.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '暂无已加入的生词' })
                return
            }
            this.wordShowStatus = true
            this.wordsList.forEach(item => {
                let str = this.article.content.replace(new RegExp(item,"g") , '<span class="tagword">'+item+'</span>') 
                this.article.content = str
            })
        },
        // 识记生词
        rememberWord() {
            let path = '/reading/remember?exerciseId=' + this.exerciseId + '&articleId=' + this.articleId 
            if (this.userId) {
                path += '&userId=' + this.userId
            }
            this.$router.push(path)
        },
        // 跳转有道词典
        jumpYoudao(word) {
            let url = 'https://dict.youdao.com/result?word=' + word + '&lang=en'
            window.open(url)
        },
        checkOptionChoose(option) {
            // 判断当前选项是否被选中
            let answer = this.question.answer.data || []
            let index = answer.findIndex(item => item == option.prefix)
            return index >= 0 ? true : false
        },
        checkOptionRight(option) {
            // 判断选项是否正确
            let answer = this.question.answer.data || []
            let rightAnswer = this.question.rightAnswer || []
            let index = answer.findIndex(item => item == option.prefix)
            let rightIndex = rightAnswer.findIndex(item => item == option.prefix)
            return index >= 0 && rightIndex >= 0 ? true : false
        },
        // 详情词汇
        onmouseup () {
            if (window.getSelection) {
                this.infoTop = 0
                this.infoLeft = 0
                let text = window.getSelection().toString().trim(); //选中文字
                if(!text.trim()) {
                    this.wordPop = false
                    return 
                }
                let {left,top, height, width} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                
                this.infoword = text
                this.infoTop = top + 70
                this.infoLeft = left 
                this.wordPop = true
            } else if (document.selection && document.selection.type != "Control") {      
                //ie9以下的支持，可不考虑
                $scope.mark.selectionText[0] = document.selection.createRange().text;
            }
        },
        mouseDownFn(){
            this.firstTime = new Date().getTime()
        },
        // 选项词汇
        onmouseup_word(e) {
            this.lastTime = new Date().getTime()
            if (window.getSelection) {
                this.wtop = 0
                this.wleft = 0
                let text = window.getSelection().toString().trim(); //选中文字
                // 鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击
                if((this.lastTime - this.firstTime) < 200 || text === ''){
                    this.isClick = true
                } else {
                    this.isClick = false
                }
                if(!text.trim()) {
                    this.questionWordPop = false
                    return 
                }

                // 判断text是否是英文单词
                let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;
                if (!reg.test(text)) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                    return
                }
                let start = window.getSelection().anchorOffset; //开始位置
                let end = window.getSelection().focusOffset;  //结束位置
                // let {left,top,height,width} = window.getSelection().getRangeAt(0).getBoundingClientRect()

                // console.log('rect',window.getSelection().getRangeAt(0).getBoundingClientRect())
                // this.word = text
                // this.wtop = top + 70
                // this.wleft = left 

                let {left,top,right} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                this.word = text

                this.wtop = top + 70
                this.wleft = left 
                this.questionWordPop = true
                let w = 0
                let winWidth =window.innerWidth
                this.$nextTick(()=>{
                    w = this.$refs.myElement.offsetWidth
                    if((right+w)>winWidth){
                        this.wleft =  winWidth - w
                    }
                })

                this.getWordTranslate(this.word)
                
            } else if (document.selection && document.selection.type != "Control") {      
                //ie9以下的支持，可不考虑
                $scope.mark.selectionText[0] = document.selection.createRange().text;
            }
        },
        // 下一题
        async nextQuestion() {
            if (this.questionIndex < this.questions.length - 1) {
                this.questionIndex++
                this.question = this.questions[this.questionIndex]
            }
        },
        // 上一题
        prevQuestion() {
            if (this.questionIndex > 0) {
                this.questionIndex--
                this.question = this.questions[this.questionIndex]
            }
        },
        closeWordPop(type){
            if (type == 1) {
                this.wordPop = false
            }else {
                this.questionWordPop = false
            }
            window.getSelection().removeAllRanges();
        },
        // 将time转换成分秒
        formatUseTime(useTime) {
            if (useTime) {
                // 将秒转换成分秒
                let m = parseInt(useTime / 60)
                let s = useTime % 60
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                useTime = m + ':' + s
            }
            return useTime
        },
        gozh(){
          if (this.z_c == '转中文'){
            this.z_c = '转英文'
          }else {
            this.z_c = '转中文'
          }
        },
         // 打印
        printFun() {
            let url = config.basePrintUrl + '/article?id=' + this.articleId
            window.open(url)  
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.po{
    width: 0;
    height: 0;
}

.tagword{
    background-color: #019E69;
    background:#019E69;
}
.modal_cont{
    width: 100%;
    height: 100%;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.text_cont,.word_text{
    user-select: text;
 &::selection
    {
        background: #019E69;
        color: #fff;
    }
    ::-moz-selection
    {
        background: #019E69;
        color: #fff;

    }
}
.green{background: #19C14B;}
.red{
    background: #FF5252 !important;
}

.wrong {
    background: #ff525236 !important;
    border: 1px solid #ff525291 !important;
}

.box_cont{overflow: hidden;}

.topic_cont{
    width: 65%;
}
.answer_tit{
    position: relative;
    .last_icon{
        position: absolute;
        left: 0;
        width: 3rem;
        height: 3rem;
    }
    .next_icon{
        position: absolute;
        right: 0;
        width: 3rem;
        height: 3rem;
    }
}
.answer_cont{
    width: 35%;
    height: auto;
    overflow: auto;
    background: #F7F8FA;
    padding: 3.5rem 4rem;
    &::-webkit-scrollbar {
        width: 0px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }
    .title{
        width: 23.7rem;
        height: 6rem;
        border-radius: 14.3rem;
        background: rgba(#F69B2C, .1);
        margin: 0 auto;
        .icon{
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }
        .text{
            font-size: 4rem;
            color: #F69B2C;
        }
    }
    .option_row{
        border: 0.5px solid #019E69;
        border-radius: 4px;
        padding: 2.6rem 2rem;
        margin-top: 2.4rem;
        .option{
            width: 3.8rem;
            height: 3.8rem;
            border-radius: 50%;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 1px solid #019E69;
            margin-right: 3rem;
        }
        .status1{
            background: #019E69;
            color: #fff;
        }
    }
    .status{
        background: rgba(11, 154, 255, 0.1);
    }
    .work_cont{
        margin-top: 3rem;
        .text{margin-top: 1.6rem;}
    }
}
.head_cont{
    color: #3A3F5E;
    font-size: 3.2rem;
    line-height: 6.4rem;
    margin-top: 2.4rem;
    user-select: text;
    &::selection
        {
            background: #019E69;
            color: #fff;
        }
        ::-moz-selection
        {
            background: #019E69;
            color: #fff;

        }
    .tag{
        width: 5.5rem;
        height: 3.4rem;
        border-radius: 6px;
        color: #fff;
        background: #019E69;
        padding: 5px 7px;
    }
}

.answer_over{
    padding: 4rem;
    background: #fff;
    color: #9E9E9E;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    .cont{
        // width: 100%;
        margin-top: 5.4rem;
        margin-bottom: 10rem;
        .item{
            width: 6rem;
            height: 6rem;
            border-radius: 50%;
            color: #fff;
            margin-right: 1rem;
            &:last-child(5n){
                margin-right: 0;
            }
        }
    }
}
.info_cont{
    position: fixed;
    min-width: 26.8rem;
    // height: 16.1rem;
    border-radius: 1rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 0 2.4rem;
    .word{
        color: #3A3F5E;
        padding: 1rem 0;
        border-bottom: 1px solid #F0F2F4;
        line-height: 7rem;
    }
    .word_btn{
        text-align: center;
        color: #019E69;
        // padding: 2.4rem 0;
        line-height: 7rem;
        font-size: 2.2rem;
    }
}
.window_cont{
    position: fixed;
    min-width: 42.6rem;
    // height: 16.1rem;
    border-radius: 1rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 0 2.4rem;
    .word{
        color: #3A3F5E;
        padding: 1rem 0;
        line-height: 7rem;
        .play_icon{
            width: 3rem;
            height: 3rem;
            margin-left: 1rem;
        }
    }
    .word_btn{
        width: 50%;
        text-align: center;
        color: #019E69;
        // padding: 2.4rem 0;
        line-height: 4rem;
        font-size: 2.2rem;

    }
    .word_meaning{
        line-height: 4.8rem;
        max-height: 60vh;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            height: 1px;
        }
        /* 滑块部分 */
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        /* 轨道部分 */
        &::-webkit-scrollbar-track { 
        //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #fff;
            border-radius: 5px;
        }
    }
    .wordbtn_cont{
        border-top: 1px solid #F0F2F4;
        padding: 1.5rem 0;
        margin-top: 2.7rem;
    }
    .bl{
        border-left: 0.5px solid #F0F2F4;
    }
}
.tit_cont{
    width: 100%;
    padding: 4.2rem 14rem 1.6rem;
    text-align: left;
}
.level_cont{
    margin-top: 2rem;
    .print_cont{
        width: 13.6rem;
        height: 4.4rem;
        border-radius: 4px;
        background: #F7F8FA;
        .icon{
            width: 2.4rem;
            height: 2.4rem;
            margin-right: 1rem;
        }
    }
}
.level_row{
    color: #626780;
    .level_icon{
        width: 1.8rem;
        height: 1.8rem;
        margin-left: 5px;
        .icon{
            width: 2.4rem;
            height: 2.4rem;
        }
    }
}

.text_cont{
    padding: 0 14rem;
    font-family: Open Sans;
    font-size: 3.6rem;
    line-height: 7.2rem;
    letter-spacing: 0em;
    text-align: left;
    flex: 1;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }
}
.justify-end{padding-left: 2rem}

.btn_cont{
    width: 100%;
    // padding: 2rem calc(20% + 6px) 0;
    // padding: 2rem 71.7rem 0 10rem;
    padding: 4.2rem 2rem;
    // border-top: 1px solid #4762BB;
    border-top: 1px solid #F7F8FA;
    .left_num{
        margin: auto 0;
        font-size: 3.6rem;
        font-weight: bold;
        .num1{
            color: #FF5252;
        }
        .num2{
            color: #767676;

        }
    }
}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
    // padding: 1rem 71.7rem 0 10rem;
}

</style>